<template>
  <div class="slot-customization-example">
    <div class="mb-6">
      <h3 class="text-lg font-semibold mb-2">🎨 完整插槽自定义演示</h3>
      <p class="text-base-content/70 text-sm mb-4">
        演示如何同时使用所有插槽
        <code>#backdrop</code>、<code>#header</code>、<code>#content</code>、<code>#footer</code>
        创建完全自定义的弹窗
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- 主题弹窗 -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body">
          <h4 class="card-title text-base">主题弹窗</h4>
          <p class="text-sm text-base-content/70 mb-4">使用主题色彩的自定义弹窗</p>

          <button @click="showThemeModal = true" class="btn btn-primary btn-sm">查看效果</button>
        </div>
      </div>

      <!-- 卡片弹窗 -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body">
          <h4 class="card-title text-base">卡片弹窗</h4>
          <p class="text-sm text-base-content/70 mb-4">卡片风格的自定义弹窗</p>

          <button @click="showCardModal = true" class="btn btn-secondary btn-sm">查看效果</button>
        </div>
      </div>

      <!-- 对话框弹窗 -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body">
          <h4 class="card-title text-base">对话框弹窗</h4>
          <p class="text-sm text-base-content/70 mb-4">对话框风格的自定义弹窗</p>

          <button @click="showDialogModal = true" class="btn btn-accent btn-sm">查看效果</button>
        </div>
      </div>

      <!-- 设置弹窗 -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body">
          <h4 class="card-title text-base">设置弹窗</h4>
          <p class="text-sm text-base-content/70 mb-4">设置页面的自定义弹窗</p>

          <button @click="showSettingsModal = true" class="btn btn-warning btn-sm">查看效果</button>
        </div>
      </div>
    </div>

    <!-- 主题弹窗 Modal -->
    <Modal v-model:visible="showThemeModal" size="xl">
      <template #backdrop>
        <div
          class="absolute inset-0 bg-gradient-to-br from-primary/40 to-secondary/40 backdrop-blur-lg"
        ></div>
      </template>

      <template #header="{ close }">
        <div class="bg-gradient-to-r from-primary via-secondary to-accent text-primary-content p-6">
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-4">
              <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center">
                <span class="text-3xl">🎨</span>
              </div>
              <div>
                <h3 class="text-2xl font-bold">主题弹窗</h3>
                <p class="text-primary-content/80">完全自定义的主题体验</p>
              </div>
            </div>
            <button
              @click="close"
              class="btn btn-ghost btn-sm btn-circle text-primary-content hover:bg-white/20"
            >
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            </button>
          </div>
        </div>
      </template>

      <template #content>
        <div class="p-8 bg-gradient-to-b from-base-100 to-base-200">
          <div class="text-center mb-6">
            <div class="text-6xl mb-4">🌈</div>
            <h4 class="text-2xl font-bold text-base-content mb-3">主题弹窗</h4>
            <p class="text-base-content/70 text-lg">
              这是一个使用所有插槽自定义的主题弹窗，展示了完整的自定义能力。
            </p>
          </div>

          <div class="grid grid-cols-3 gap-4 mb-6">
            <div class="stat bg-primary/10 rounded-xl p-4 text-center">
              <div class="stat-title text-primary">主色调</div>
              <div class="stat-value text-primary text-xl">Primary</div>
            </div>
            <div class="stat bg-secondary/10 rounded-xl p-4 text-center">
              <div class="stat-title text-secondary">辅助色</div>
              <div class="stat-value text-secondary text-xl">Secondary</div>
            </div>
            <div class="stat bg-accent/10 rounded-xl p-4 text-center">
              <div class="stat-title text-accent">强调色</div>
              <div class="stat-value text-accent text-xl">Accent</div>
            </div>
          </div>

          <div class="alert alert-info shadow-lg">
            <span class="text-lg">💡 提示：这个弹窗使用了所有可用的插槽进行完全自定义！</span>
          </div>
        </div>
      </template>

      <template #footer="{ close }">
        <div class="bg-gradient-to-r from-base-200 to-base-300 p-6">
          <div class="flex items-center justify-between">
            <div class="text-sm text-base-content/70">
              <span class="font-semibold">主题弹窗</span> - 完全自定义的弹窗体验
            </div>
            <div class="flex gap-3">
              <button @click="close" class="btn btn-outline btn-sm">
                <span class="mr-2">↩️</span>
                返回
              </button>
              <button @click="close" class="btn btn-primary btn-sm">
                <span class="mr-2">✨</span>
                应用主题
              </button>
            </div>
          </div>
        </div>
      </template>
    </Modal>

    <!-- 卡片弹窗 Modal -->
    <Modal v-model:visible="showCardModal" size="lg">
      <template #backdrop>
        <div class="absolute inset-0 bg-black/30 backdrop-blur-sm"></div>
      </template>

      <template #header="{ close }">
        <div class="bg-base-100 border-b border-base-300 p-6">
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
              <div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center">
                <span class="text-2xl text-primary">📋</span>
              </div>
              <div>
                <h3 class="text-xl font-bold text-base-content">卡片弹窗</h3>
                <p class="text-base-content/70 text-sm">简洁的卡片设计</p>
              </div>
            </div>
            <button @click="close" class="btn btn-ghost btn-sm btn-circle">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            </button>
          </div>
        </div>
      </template>

      <template #content>
        <div class="p-6">
          <div class="text-center mb-6">
            <div class="text-4xl mb-4">📋</div>
            <h4 class="text-xl font-bold text-base-content mb-2">卡片弹窗</h4>
            <p class="text-base-content/70">这是一个卡片风格的自定义弹窗</p>
          </div>

          <div class="space-y-4">
            <div class="card bg-base-200 shadow-sm">
              <div class="card-body p-4">
                <h5 class="font-semibold">功能特性</h5>
                <p class="text-sm text-base-content/70">支持多种自定义选项</p>
              </div>
            </div>

            <div class="card bg-base-200 shadow-sm">
              <div class="card-body p-4">
                <h5 class="font-semibold">使用场景</h5>
                <p class="text-sm text-base-content/70">适用于各种业务场景</p>
              </div>
            </div>
          </div>
        </div>
      </template>

      <template #footer="{ close }">
        <div class="bg-base-100 border-t border-base-300 p-6">
          <div class="flex justify-end gap-3">
            <button @click="close" class="btn btn-outline btn-sm">取消</button>
            <button @click="close" class="btn btn-primary btn-sm">确认</button>
          </div>
        </div>
      </template>
    </Modal>

    <!-- 对话框弹窗 Modal -->
    <Modal v-model:visible="showDialogModal" size="md">
      <template #backdrop>
        <div class="absolute inset-0 bg-black/50 backdrop-blur-md"></div>
      </template>

      <template #header="{ close }">
        <div class="bg-warning text-warning-content p-6">
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
                <span class="text-xl">⚠️</span>
              </div>
              <div>
                <h3 class="text-lg font-bold">确认对话框</h3>
                <p class="text-warning-content/80 text-sm">请确认您的操作</p>
              </div>
            </div>
            <button
              @click="close"
              class="btn btn-ghost btn-sm btn-circle text-warning-content hover:bg-white/20"
            >
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            </button>
          </div>
        </div>
      </template>

      <template #content>
        <div class="p-8 text-center">
          <div class="text-5xl mb-4">❓</div>
          <h4 class="text-xl font-bold text-base-content mb-3">确认操作</h4>
          <p class="text-base-content/70 text-lg mb-6">您确定要执行此操作吗？此操作不可撤销。</p>

          <div class="alert alert-warning">
            <span>⚠️ 警告：此操作将永久删除相关数据</span>
          </div>
        </div>
      </template>

      <template #footer="{ close }">
        <div class="bg-base-200 p-6">
          <div class="flex justify-center gap-4">
            <button @click="close" class="btn btn-outline btn-sm">
              <span class="mr-2">❌</span>
              取消
            </button>
            <button @click="close" class="btn btn-warning btn-sm">
              <span class="mr-2">✅</span>
              确认删除
            </button>
          </div>
        </div>
      </template>
    </Modal>

    <!-- 设置弹窗 Modal -->
    <Modal v-model:visible="showSettingsModal" size="2xl">
      <template #backdrop>
        <div
          class="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 backdrop-blur-lg"
        ></div>
      </template>

      <template #header="{ close }">
        <div class="bg-gradient-to-r from-blue-500 to-purple-500 text-white p-6">
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-4">
              <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
                <span class="text-2xl">⚙️</span>
              </div>
              <div>
                <h3 class="text-xl font-bold">系统设置</h3>
                <p class="text-white/80 text-sm">配置您的系统偏好</p>
              </div>
            </div>
            <button
              @click="close"
              class="btn btn-ghost btn-sm btn-circle text-white hover:bg-white/20"
            >
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            </button>
          </div>
        </div>
      </template>

      <template #content>
        <div class="p-6">
          <div class="space-y-6">
            <div class="form-control">
              <label class="label">
                <span class="label-text font-semibold">主题设置</span>
              </label>
              <select class="select select-bordered">
                <option>浅色主题</option>
                <option>深色主题</option>
                <option>自动切换</option>
              </select>
            </div>

            <div class="form-control">
              <label class="label">
                <span class="label-text font-semibold">语言设置</span>
              </label>
              <select class="select select-bordered">
                <option>简体中文</option>
                <option>English</option>
                <option>日本語</option>
              </select>
            </div>

            <div class="form-control">
              <label class="label cursor-pointer justify-start gap-3">
                <input type="checkbox" class="checkbox checkbox-primary" />
                <span class="label-text">启用通知</span>
              </label>
            </div>

            <div class="form-control">
              <label class="label cursor-pointer justify-start gap-3">
                <input type="checkbox" class="checkbox checkbox-primary" />
                <span class="label-text">自动保存</span>
              </label>
            </div>
          </div>
        </div>
      </template>

      <template #footer="{ close }">
        <div class="bg-gradient-to-r from-base-200 to-base-300 p-6">
          <div class="flex items-center justify-between">
            <div class="text-sm text-base-content/70">
              <span class="font-semibold">设置提示：</span>修改将在下次启动时生效
            </div>
            <div class="flex gap-3">
              <button @click="close" class="btn btn-outline btn-sm">重置</button>
              <button @click="close" class="btn btn-primary btn-sm">保存设置</button>
            </div>
          </div>
        </div>
      </template>
    </Modal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Modal } from '@/components/common/modal'

defineOptions({
  name: 'SlotCustomizationExample',
})

// 控制各个Modal的显示状态
const showThemeModal = ref(false)
const showCardModal = ref(false)
const showDialogModal = ref(false)
const showSettingsModal = ref(false)
</script>

<style scoped>
.slot-customization-example {
  font-family:
    'Inter',
    'SF Pro Display',
    'SF Pro Text',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    'Roboto',
    'Helvetica Neue',
    'Arial',
    sans-serif;
}

code {
  font-family:
    'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', 'Courier New',
    monospace;
  background: hsl(var(--b2));
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
}
</style>
